<template>
  <div class="c-bg-sgray">
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <div class="c-pt60 c-flex-column c-justify-sa c-h" v-if="(!refereeAndUser&&!homeWorkInfo.isTeacher)&&homeWorkInfo.enableShow2==0">
      <loading-status-tem :noDataText="'暂无私密打卡查看权限'" :noData="true"></loading-status-tem>
      <!-- <div class="back-index" @click="clickGoIndex">{{from == 'course' || from == 'myExam' || from == 'reservationSection' || from == 'form' ? '返回上一页' : from == 'booking' ? '返回师资列表' : (from == 'vipCollage' ? '返回会员升级' : '返回首页')}}</div> -->
      <div class="c-mh72 c-fs28 c-fc-white theme-bg c-pv16 c-flex-row c-justify-center c-br36" @click="clickGohomeworke">了解打卡</div>
    </div>
    <div v-else>
      <div class="c-bg-white c-br8 c-pt20 c-pb20 c-p" v-if="homeWorkInfo">
        <div class="c-flex-row c-ph40 c-aligni-center">
          <img class="c-ww60 c-hh60 c-brp50" :src="$addXossFilter(homeWorkInfo.headimgurl, require('../../../assets/defult_head.png'))" alt="" />
          <div class="c-pl20 c-flex-grow1 c-w0 c-flex-row">
            <div class="c-flex-grow1 c-flex-column c-justify-center c-aligni-start">
              <div class="c-fs24 c-flex-row c-aligni-center">
                <span class="c-pr20 c-text-ellipsis1 c-ww180">{{
                  homeWorkInfo.nickname
                }}</span>
              </div>
              <div class="c-fs24 c-flex-row c-aligni-center">
                <div v-if="
                  workType == 1 && homeWorkInfo.rank !== null && homeWorkInfo.rank !== 0
                " class="c-flex-row c-flex-center">
                  <img v-for="index in 5" :key="index" class="c-ww24 c-hh24 c-mr4" :src="
                    index <= homeWorkInfo.rank
                      ? require('@/assets/i/wap/clockIn/star_s.png')
                      : require('@/assets/i/wap/clockIn/star_d.png')
                  " alt="" />
                </div>
                <span v-if="
                  workType == 1 && homeWorkInfo.rank !== null && homeWorkInfo.rank !== 0
                " class="c-flex-shrink0 theme-fc c-pl10 c-pr10">{{ homeWorkInfo.rank * 20 }}分</span>
                <div class="c-fs18 c-fc-gray c-flex-row c-aligni-center">
                  <span v-if="workType == 1">
                    已打卡{{ homeWorkInfo.finishNum }}天</span>
                  <span v-else-if="workType == 2">
                    已完成{{ homeWorkInfo.finishNum }}个作业</span>
                  <span v-else>
                    已打卡{{ homeWorkInfo.finishNum }}个课时</span>
                </div>
              </div>
            </div>
          </div>
          <i class="iconfont c-fc-gray c-fs32" v-if="(homeWorkInfo.loginUserId==homeWorkInfo.userId)&&((homeWorkInfo.isDisAgainSign)||(homeWorkInfo.isAnalyze && homeWorkInfo.type == 1)||homeWorkInfo.enableDelete==1)" @click.stop="calcOperation(homeWorkInfo,index)">&#xe7be;</i>
        </div>
      </div>
      <div class="c-pl24 c-pr24 c-mt20" v-if="homeWorkInfo">
        <div class="c-bg-white c-br20 c-p">
          <div v-if="(homeWorkInfo.loginUserId==homeWorkInfo.userId||homeWorkInfo.isTeacher)&&homeWorkInfo.enableShow==0&&isDisCheat==2" class="c-fs48 theme-fc iconfont icon-biaoqianx c-pa onlyIcon">
            <div class="c-fc-white c-fs18 c-pa c-p-t5 c-p-l20">仅老师可见</div>
          </div>
          <clock-aswer-content :stuHwId="stuHwId" :totalNum='totalNum' :isStudent='true' class="c-bg-white c-pb40 c-br20" @InfoResult='InfoResult' @clickZan="clickZan" @clickCom="clickCom" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" :playAduioSrc="playAduioSrc" :homeworkType="homeWorkInfo.type"
            :aswerInfo="homeWorkInfo" :aswerIndex="1" :isTeacher="homeWorkInfo.isTeacher">
          </clock-aswer-content>
        </div>
      </div>

      <section class="c-flex-row c-ph24 c-aligni-center c-justify-sb c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1">
        <div class="c-flex-row c-aligni-center" :class="homeWorkInfo.isOpenLongPic==1||(refereeAndUser&&!clockInInfo.isFriendHelper && !homeWorkInfo.collage && homeWorkInfo.sales == null && homeWorkInfo.bargain == null)?'c-mr36':''">
          <div class="c-flex-column c-aligni-center c-flex-center c-mr30" @click="goSpread" v-if="refereeAndUser&&!clockInInfo.isFriendHelper && !homeWorkInfo.collage && homeWorkInfo.sales == null && homeWorkInfo.bargain == null">
            <i class="iconfont c-fc-xblack c-fs32">&#xe8b0;</i>
            <div class="c-fc-xblack c-fs18 c-mt2">邀请好友</div>
          </div>
          <div v-if="homeWorkInfo.isOpenLongPic==1" class="c-flex-column c-aligni-center c-flex-center" @click="clickBuildImg">
            <i class="iconfont c-fc-xblack c-fs32">&#xe745;</i>
            <div class="c-fc-xblack c-fs18 c-mt2">生成长图</div>
          </div>
        </div>
        <div @click="clickGohomeworke" class="theme-bg c-flex-grow1 c-hh64 c-fs26 c-br36 c-text-hidden c-w0 c-fc-white c-h c-flex-row c-flex-center">返回主页</div>
      </section>
    </div>
    <!-- 视频播放器 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>
    <!-- 教师评论(评分和设置精选) -->
    <clock-tea-comment-com enHwId="enHwId" :clockInId="clockInId" :curSelectDate="curSelectDate" :curId="curHwId"
      :enDate="enDate" :teacher="1" :enableLongAudio='enableLongAudio' :playAduioSrc="playAduioSrc" :showTeaCommentModal="showTeaCommentModal" :workType="workType" :resultIndex="resultIndex" :resultInfo="resultInfo" :imgData="imgData"
      @commentSuccess="commentSuccess" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" @cleanPlayAudioUrl="cleanPlayAudioUrl"></clock-tea-comment-com>
    <!-- 非教师评论 -->
    <clock-comment-com enHwId="enHwId" :clockInId="clockInId"
      :enDate="enDate" :enableLongAudio='enableLongAudio' @clickShowVideo="clickShowVideo" :comType="comType" :isTeacher="homeWorkInfo.isTeacher" :playAduioSrc="playAduioSrc" :showCommentModal="showComInput" :inputCom="inputCom" :replyName="replyName"
      :curComId="curComId" :replyId="replyId" :imgData="imgData" @commentSuccess="commentSuccess" @clickPlayAudio="clickPlayAudio" @cleanPlayAudioUrl="cleanPlayAudioUrl"></clock-comment-com>
    <!-- 非简答题长图 -->
    <div class="anvasBox">
      <div class="anvasContent anvasContentbg" id="canvas2" :style="longImgBgUrl">
        <div v-if="homeWorkInfo" style="padding-top:42px;padding-bottom:40px">
          <div class="c-flex-row c-alignc-center" style="padding-bottom: 30px;width: 440px;margin:0 auto;">
            <div class="c-brp50 c-text-hidden c-pz1" style="width:70px;height:70px;border:2px solid #fff;margin-right:20px">
              <img :src="homeWorkInfo.headimgurl" alt="" style="width:70px;height:70px;">
            </div>
            <div>
              <div :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-fw600" style="font-size:24px;width: 240px;margin:0 auto;">
                {{homeWorkInfo.nickname}}
              </div>
              <div  :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-center" style="margin-top:12px;font-size:20px;letter-spacing: 1.5px;;width: 240px;">{{homeWorkInfo.createdAt}}</div>
            </div>
          </div>
          <div>
            <div class="c-center" style="width: 440px;">
              <div class="c-bg-white c-p" style="padding:40px 0px;border-top-left-radius:20px;border-top-right-radius:20px">
                <section v-if="homeWorkInfo.hwId" style="padding:0 20px">
                  <div style="width:120px;height: 120px;margin: 0 auto;" class="c-p">
                    <canvas id="canound" width="120" height="120">
                    </canvas>
                    <div class="c-pa c-translate-xy-50 c-p-tp46 c-p-tl50 c-textAlign-c c-flex-column c-aligni-center c-flex-center" style="width:120px;height: 120px;">
                      <div class="c-colckInPoin">
                        <span style="font-size:32px;">{{homeWorkInfo.setScore ? Math.floor(homeWorkInfo.totalpoins) : Math.floor(homeWorkInfo.accuracy * 100)}}</span>
                        <span style="font-size:18px;">{{homeWorkInfo.setScore ? '分':'%'}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="theme-bg-10 theme-fc c-colckInBr c-pa" style="padding: 0px 14px;font-size: 20px;top: 18px;right: 24px;height: 34px;line-height:20px">{{homeWorkInfo.hasMan}}人完成</div>
                  <div class="c-fc-gray c-textAlign-c" style="font-size: 24px;padding-top: 10px;">
                    <span>您已超越{{homeWorkInfo.overstep}}%的学员</span>
                  </div>
                  <div class="c-flex-row c-aligni-end c-bg-sgray" style="font-size: 20px;padding-top: 16px;margin-top: 16px;padding-bottom: 24px;border-radius: 20px;">
                    <div class="c-flex-grow1 c-textAlign-c">
                      <div class="c-fc-xblack">{{Math.floor(homeWorkInfo.accuracy * 100)}}%</div>
                      <div class="c-fc-gray" style="padding-top: 4px;">正确率</div>
                    </div>
                    <div class="c-flex-grow1 c-textAlign-c">
                      <div class="c-fc-xblack">{{homeWorkInfo.answerNum}}</div>
                      <div class="c-fc-gray" style="padding-top: 4px;">已做题数</div>
                    </div>
                    <div class="c-flex-grow1 c-textAlign-c">
                      <div class="c-fc-xblack">{{homeWorkInfo.useTime}}</div>
                      <div class="c-fc-gray" style="padding-top: 4px;">耗时</div>
                    </div>
                  </div>
                </section>
              </div>
              <!-- line -->
              <div class="c-flex-row c-aligni-center c-justify-sb" style="margin-top:-1px">
                <img :src="require('@/assets/i/wap/clockIn/dashed.png')" alt="">
              </div>
              <div class=" c-bg-white" style="border-bottom-left-radius:20px;border-bottom-right-radius:20px;padding:18px 24px;margin-top:-2px">
                <div class="c-flex-row c-alignc-center c-flex-center">
                  <div style="width:88px"><img :src="homeWorkInfo.qrCodeUrl" alt=""></div>
                  <div class="c-flex-grow1" style="margin-left:18px">
                    <div class="c-fc-gray c-wordBreakAll" style="margin:0 auto;font-size:18px;width:294px;letter-spacing: 2px;">来自{{homeWorkInfo.courseName}}</div>
                    <div class="c-fc-white c-textAlign-c c-fw600 theme-bg" style="line-height: 10px;height:30px;width:242px;font-size:18px;margin-top:12px;border-radius: 15px;padding:4px 12px;letter-spacing: 2px;">识别二维码，查看详情</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ai题长图 -->
    <div class="anvasBox">
      <div class="anvasContent anvasContentbg" id="canvas3"  :style="longImgBgUrl">
        <div v-if="homeWorkInfo&&canvasFlag&&homeWorkInfo.type==3" style="padding-top:40px;padding-bottom:40px">
          <div class="c-flex-row c-alignc-center" style="padding-bottom: 30px;width: 440px;margin:0 auto;">
            <div class="c-brp50 c-text-hidden c-pz1" style="width:70px;height:70px;border:2px solid #fff;margin-right:20px">
              <img :src="homeWorkInfo.headimgurl || require('@/assets/defult_head.png')" alt="" style="width:70px;height:70px;">
            </div>
            <div>
              <div :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-fw600" style="font-size:24px;width: 240px;margin:0 auto;">
                {{homeWorkInfo.nickname}}
              </div>
              <div  :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-center" style="margin-top:12px;font-size:20px;letter-spacing: 1.5px;;width: 240px;">{{homeWorkInfo.createdAt}}</div>
            </div>
          </div>
          <div style="margin:0 30px;border-bottom-left-radius:16px;border-bottom-right-radius:16px">
            <div v-if="homeWorkInfo" class="c-bg-white" style="padding: 0px 24px 20px;border-top-left-radius: 20px;border-top-right-radius: 20px;padding-top: 40px;margin-top:-1px">
              <section class="c-flex-row c-aligni-center">
                <div class="c-p">
                  <img style="width: 92px;height: 108px;" :src="require('@/assets/i/wap/clockIn/clock-level.png')" alt="">
                  <div class="c-pa c-fc-white c-p-l0 c-p-r0 c-center c-fw600 c-textAlign-c" style="top: 16px;font-size: 36px;">
                    {{Number(homeWorkInfo.answerContent.score).toFixed(0)}}
                  </div>
                </div>
                <div class="c-flex-grow1" style="padding-left: 28px;">
                  <div class="c-flex-row c-aligni-center">
                    <span class="c-flex-grow1 c-fc-gray" style="font-size: 22px;padding-bottom:6px">完整度:</span>
                    <div class="c-p c-bg-sgray" style="width:120px;height:8px;border-radius:4px ;margin-top:8px">
                      <div class="c-pa c-p-l0 c-p-t0 theme-bg" style="height: 8px;border-radius:4px ;" :style="'width:' + homeWorkInfo.answerContent.completion + '%'"></div>
                    </div>
                    <span class="c-fc-gray" style="font-size: 20px;padding-left: 24px;padding-bottom:6px">{{homeWorkInfo.completionLevel}}</span>
                  </div>
                  <div class="c-flex-row c-aligni-center" v-if="homeWorkInfo.answerContent.fluencyScore!==''||homeWorkInfo.answerContent.fluencyScore!==null">
                    <span class="c-flex-grow1 c-fc-gray" style="font-size: 22px;padding-bottom:6px">流畅度:</span>
                    <div class="c-p c-bg-sgray" style="width:120px;height:8px;border-radius:4px ;margin-top:8px">
                      <div class="c-pa c-p-l0 c-p-t0 theme-bg" style="height: 8px;border-radius:4px ;" :style="'width:' + homeWorkInfo.answerContent.fluencyScore + '%'"></div>
                    </div>
                    <span class="c-fc-gray" style="font-size: 20px;padding-left: 24px;padding-bottom:6px">{{homeWorkInfo.fluencyScoreLevel}}</span>
                  </div>
                  <div class="c-flex-row c-aligni-center" v-if="homeWorkInfo.answerContent.accuracyScore!==''||homeWorkInfo.answerContent.accuracyScore!==null">
                    <span class="c-flex-grow1 c-fc-gray" style="font-size: 22px;padding-bottom:6px">准确度:</span>
                    <div class="c-p c-bg-sgray" style="width:120px;height:8px;border-radius:4px ;margin-top:8px">
                      <div class="c-pa c-p-l0 c-p-t0 theme-bg" style="height: 8px;border-radius:4px ;" :style="'width:' + homeWorkInfo.answerContent.accuracyScore + '%'"></div>
                    </div>
                    <span class="c-fc-gray" style="font-size: 20px;padding-left: 24px;padding-bottom:6px">{{homeWorkInfo.accuracyScoreLevel}}</span>
                  </div>
                </div>
              </section>
              <!-- 语音 -->
              <div v-if="homeWorkInfo" class="c-flex-row c-aligni-center" style="padding-top:30px">
                <div class="theme-bg-10 c-flex-row c-aligni-center" style="width: 166px;height: 60px;border-radius: 30px;padding:0 24px;">
                  <div class="iconfont c-fs36 theme-fc c-mr10" style="padding-bottom:16px">&#xe738;</div>
                  <div class="theme-fc" style="font-size: 20px;padding-bottom:16px">{{homeWorkInfo.answerContent.recordTime}}"</div>
                </div>
              </div>
              <section v-if="homeWorkInfo" style="font-size:24px;margin-top:20px">
                <template v-if="homeWorkInfo.answerContent.answer.length > 0">
                  <span :class="item.score > 60 ? 'c-fc-deepGreen':'c-fc-xlred'" v-for="(item,index) in homeWorkInfo.answerContent.answer" :key="index">
                    {{homeWorkInfo.answerContent.content.split(' ')[index]}}
                  </span>
                </template>
                <template v-else>
                  <span class="c-fc-xlred" style="letter-spacing: 2px;">{{homeWorkInfo.content}}</span>
                </template>
              </section>
              <div class="c-fc-gray" style="font-size: 24px;padding-top: 20px;" v-if="homeWorkInfo && homeWorkInfo.translate">
                {{homeWorkInfo.translate}}
              </div>
            </div>
            <!-- line -->
            <div class="c-flex-row c-aligni-center c-justify-sb" style="margin-top:-1px">
              <img :src="require('@/assets/i/wap/clockIn/dashed.png')" alt="">
            </div>
            <div class=" c-bg-white" style="border-bottom-left-radius:20px;border-bottom-right-radius:20px;padding:18px 24px;margin-top:-2px">
              <div class="c-flex-row c-alignc-center c-flex-center">
                <div style="width:88px"><img :src="homeWorkInfo.qrCodeUrl" alt=""></div>
                <div class="c-flex-grow1" style="margin-left:18px">
                  <div class="c-fc-gray c-wordBreakAll" style="margin:0 auto;font-size:18px;width:294px;letter-spacing: 2px;">来自{{homeWorkInfo.courseName}}</div>
                  <div class="c-fc-white c-textAlign-c c-fw600 theme-bg" style="line-height: 10px;height:30px;width:242px;font-size:18px;margin-top:12px;border-radius: 15px;padding:4px 12px;letter-spacing: 2px;">识别二维码，查看详情</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 简答题长图 -->
    <div class="anvasBox">
      <div class="anvasContent anvasContentbg" id="canvas1" :style="longImgBgUrl">
        <div v-if="homeWorkInfo&&homeWorkInfo.type==1" style="padding-top:42px;padding-bottom:40px">
          <!-- <img class="c-pa img-pe-none" :src="require('@/assets/i/wap/clockIn/teaHeadBg.png')" alt style="top:71px;left:30px;right:30px"> -->
          <div class="c-flex-row c-alignc-center" style="padding-bottom: 30px;width: 440px;margin:0 auto;">
            <div class="c-brp50 c-text-hidden c-pz1" style="width:70px;height:70px;border:2px solid #fff;margin-right:20px">
              <img :src="homeWorkInfo.headimgurl" alt="" style="width:70px;height:70px;">
            </div>
            <div>
              <div :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-fw600" style="font-size:24px;width: 240px;margin:0 auto;">
                {{homeWorkInfo.nickname}}
              </div>
              <div  :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-center" style="margin-top:12px;font-size:20px;letter-spacing: 1.5px;;width: 240px;">{{homeWorkInfo.createdAt}}</div>
            </div>
          </div>
          <div>
            <div class="c-center" style="width: 440px;">
              <div class="c-bg-white c-p" style="border-top-left-radius: 20px;border-top-right-radius: 20px;padding-top: 40px;margin-top:-1px">
                <div class="c-fc-xblack c-textAlign-j c-center" style="font-size:24px;line-height:38px;padding-bottom:22px;width: 400px;">
                  <div v-for="(cItem,cIndex) in content.split('\n')" :key="cIndex">{{cItem}}</div>
                </div>
                <div class="" v-if="homeWorkInfo.audioArr&&homeWorkInfo.audioArr.length>0" style="padding-left:16px;padding-right:16px;padding-bottom: 20px;">
                  <!-- 语音回答 -->
                  <div class="theme-bg-10 c-flex-row c-aligni-center" v-for="(item,index) in homeWorkInfo.audioArr" :key="index" v-if="index==0" style="margin:0 4px 0px;height:52px;border-radius: 26px;padding-left:8px;padding-right:8px;">
                    <!-- <img class="c-ww30 c-hh30 c-rotate180" v-show="playAduioSrc != item.url" src="@/assets/i/wap/course/chat_right_play.png" alt="" />
                    <img class="c-ww30 c-hh30 c-rotate180" v-show="playAduioSrc == item.url" src="@/assets/i/wap/course/chat_right_play.gif" alt="" /> -->
                    <div class="box" style="width: 32px;">
                      <div class="iconfont theme-fc" style="font-size:24px;padding-bottom:16px">&#xe738;</div>
                    </div>
                    <div class="theme-fc" style="font-size: 20px;padding-bottom:16px">录音总时长{{totalTime(homeWorkInfo.audioArr)}}</div>
                  </div>
                </div>
                <!-- <div v-if="homeWorkInfo.audioArr.length > 0" class="c-fc-red" style="padding-left:20px;padding-right:20px;font-size: 16px;margin-bottom: 20px;">
                  录音总时长{{totalTime(homeWorkInfo.audioArr)}}
                </div> -->
                <div class="c-flex-row c-flexw-wrap" v-if="homeWorkInfo.videoArr&&homeWorkInfo.videoArr.length>0" style="padding-left:16px;padding-right:16px;">
                  <div class="c-text-hidden c-p" v-for="(item,index) in homeWorkInfo.videoArr" :key="index" v-if="index<3" style="margin:0 4px 20px;width:128px;height:80px;border-radius: 20px;">
                    <img class="img-pe-none" :src="item.videoCover?item.videoCover:'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png'" alt style="width:128px;height:80px">
                    <div v-if="item.videoCover" class="img-play-btn c-flex-column c-aligni-center c-flex-center" style="border-radius: 20px;">
                      <i class="iconfont c-fs40 c-fc-white">&#xe869;</i>
                    </div>
                  </div>
                </div>
                <div class="c-flex-row c-flexw-wrap" v-if="homeWorkInfo.imgArr&&homeWorkInfo.imgArr.length>0" style="padding-left:16px;padding-right:16px;">
                  <div class="c-text-hidden" v-for="(item,index) in homeWorkInfo.imgArr" :key="index" style="margin:0 4px 20px;width:128px;height:128px;border-radius: 20px;">
                    <img class="img-pe-none" :src="item.url" alt style="width:128px;height:128px">
                  </div>
                </div>
                <div class="c-flex-row c-flexw-wrap" v-if="homeWorkInfo.filesArr&&homeWorkInfo.filesArr.length>0" style="padding-left:16px;padding-right:16px;">
                  <!-- 文档回答 -->
                  <div v-for="(item,index) in homeWorkInfo.filesArr" :key="index" v-if="index==0" class="c-bg-F6F7F9" style="border-radius: 20px;padding: 20px;margin-bottom: 20px;">
                    <div class="c-flex-row c-aligni-center">
                      <div>
                        <img style="width: 64px;height: 64px;border-radius: 20px;" :src="$addXossFilter(officeIconImg[item.type])" alt="" />
                      </div>
                      <div class="c-fc-xblack" style="font-size: 24px;width: 280px;margin-left: 16px;padding-bottom:16px">
                        {{item.name.length>20?item.name.substring(0, 20)+'...':item.name}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- line -->
              <div class="c-flex-row c-aligni-center c-justify-sb" style="margin-top:-2px">
                <img :src="require('@/assets/i/wap/clockIn/dashed.png')" alt="">
              </div>
              <div class=" c-bg-white" style="border-bottom-left-radius:20px;border-bottom-right-radius:20px;padding:18px 24px;margin-top:-2px">
                <div class="c-flex-row c-alignc-center c-flex-center">
                  <div style="width:88px"><img :src="homeWorkInfo.qrCodeUrl" alt=""></div>
                  <div class="c-flex-grow1" style="margin-left:18px">
                    <div class="c-fc-gray c-wordBreakAll" style="margin:0 auto;font-size:18px;width:294px;letter-spacing: 2px;">来自{{homeWorkInfo.courseName}}</div>
                    <div class="c-fc-white c-textAlign-c c-fw600 theme-bg" style="line-height: 10px;height:30px;width:242px;font-size:18px;margin-top:12px;border-radius: 15px;padding:4px 12px;letter-spacing: 2px;">识别二维码，查看详情</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="homeWorkInfo&&homeWorkInfo.type==4" style="padding-top:42px;padding-bottom:40px">
          <div class="c-flex-row c-alignc-center" style="padding-bottom: 30px;width: 440px;margin:0 auto;">
            <div class="c-brp50 c-text-hidden c-pz1" style="width:70px;height:70px;border:2px solid #fff;margin-right:20px">
              <img :src="homeWorkInfo.headimgurl" alt="" style="width:70px;height:70px;">
            </div>
            <div>
              <div :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-fw600" style="font-size:24px;width: 240px;margin:0 auto;">
                {{homeWorkInfo.nickname}}
              </div>
              <div  :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-center" style="margin-top:12px;font-size:20px;letter-spacing: 1.5px;;width: 240px;">{{homeWorkInfo.createdAt}}</div>
            </div>
          </div>
          <div>
            <div class="c-center" style="width: 440px;">
              <div class="c-bg-white c-p" style="border-top-left-radius: 20px;border-top-right-radius: 20px;padding-top: 40px;margin-top:-1px">
                <div class="c-flex-row c-flexw-wrap" style="padding-left:16px;padding-right:16px;">
                  <!-- 文档回答 -->
                  <div class="c-bg-F6F7F9" style="border-radius: 20px;padding: 20px;margin-bottom: 20px;">
                    <div class="c-flex-row c-aligni-center">
                      <div>
                        <img style="width: 64px;height: 64px;border-radius: 20px;" :src="require('@/assets/i/wap/clockIn/form.png')" alt="" />
                      </div>
                      <div class="c-fc-xblack" style="font-size: 24px;width: 280px;margin-left: 16px;padding-bottom:16px">
                        {{homeWorkInfo.homeWorkName}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- line -->
              <div class="c-flex-row c-aligni-center c-justify-sb" style="margin-top:-2px">
                <img :src="require('@/assets/i/wap/clockIn/dashed.png')" alt="">
              </div>
              <div class=" c-bg-white" style="border-bottom-left-radius:20px;border-bottom-right-radius:20px;padding:18px 24px;margin-top:-2px">
                <div class="c-flex-row c-alignc-center c-flex-center">
                  <div style="width:88px;"><img :src="homeWorkInfo.qrCodeUrl" alt=""></div>
                  <div class="c-flex-grow1" style="margin-left:18px">
                    <div class="c-fc-gray c-wordBreakAll" style="margin:0 auto;font-size:18px;width:294px;letter-spacing: 2px;">来自{{homeWorkInfo.courseName}}</div>
                    <div class="c-fc-white c-textAlign-c c-fw600 theme-bg" style="line-height: 10px;height:30px;width:242px;font-size:18px;margin-top:12px;border-radius: 15px;padding:4px 12px;letter-spacing: 2px;">识别二维码，查看详情</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 长图展示 -->
    <div v-show="isShowMasker" class="c-pf c-p-t0 c-p-l0 c-pz101 c-h c-w100">
      <div class="c-translucent-balck60 c-h c-w100 c-pa c-p-t0 c-p-l0"></div>
      <article class="c-textAlign-l  c-pf c-p-tp50 c-p-tp50 c-translate-y-50 c-p-l0 c-p-r0 c-m-0auto c-ww500">
        <!-- <div v-if="homeWorkInfo.type != 1" class="iconfont c-fs36 c-fc-white c-pa c-pz10 c-p-tm12 c-p-rm12" @click.stop="closeShowMasker">&#xe84e;</div> -->
        <div id="loneSpreadImg" class="c-maxhlongImg c-contexty-scroll c-pb160">
          <img @click.stop="clickImg(event)" class="c-ww500 c-m-0auto c-br20" alt>
        </div>
      </article>
      <div class="c-bg-white c-bd-t1 c-w100 c-ph24 c-pt30 c-pb20 c-br-tr20 c-br-tl20 c-hh260 c-pa c-p-b0">
        <div class="c-w100 c-p">
          <i class="iconfont c-fc-gray c-fs18 c-pa c-p-r0 c-p-t0" @click.stop="closeShowMasker">&#xe61b;</i>
          <div class="c-pb30  c-br24 c-fs24 c-flex-center c-flex-row c-m-0auto c-mt12 c-fc-sblack c-fw600">长按上面图片保存海报</div>
          <div id="scroll" class="c-contexty-hidden c-contextX-scroll c-ws-n" style="overflow: auto;">
            <!--  -->
            <div class="c-p c-mr20 c-inlineblack c-text-hidden c-br10" :class="longImgBg==index?'theme-bd2 c-ww104 c-hh108':'c-ww84 c-hh88'" v-for="(item,index) in smallImg" :key="index" @click="chooseImgbg(index)">
              <img :src="item.url" alt="" class="c-h c-w100 img-pe-none c-object-fit-cover">
              <div class="c-flex-row c-flex-center c-pa c-p-b6 c-p-r6 c-brp50 c-ww32 c-hh32 theme-bg c-bd2-white" v-show="longImgBg==index">
                <i class="iconfont c-fc-white c-fs20">&#xe76c;</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <cj-actionsheet v-model="myOperationShow" :item-list="operationMenu" @choose="clickOperationMenu"></cj-actionsheet>
  </div>
</template>


<script>
import { utilJs } from "@/utils/common.js";
import clockAswerContent from "@/components/templates/clockIn/clockAswerContent.vue";
import clockCommentCom from "@/components/templates/clockIn/clockCommentCom.vue";
import clockTeaCommentCom from "@/components/templates/clockIn/clockTeaCommentCom.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
let clockInId = ""; //当前作业ID
let curComIndex = '';//当前评论的下标
let isLoading = false;
let html2canvas = null;
let hasRead = '';//推送来源
const OFFICE_IMG_MAP = {
  'doc': require('@/assets/i/wap/clockIn/icon_word.png'),
  'docx': require('@/assets/i/wap/clockIn/icon_word.png'),
  'xls': require('@/assets/i/wap/clockIn/icon_excel.png'),
  'xlsx': require('@/assets/i/wap/clockIn/icon_excel.png'),
  'ppt': require('@/assets/i/wap/clockIn/icon_ppt.png'),
  'pptx': require('@/assets/i/wap/clockIn/icon_ppt.png'),
  'pdf': require('@/assets/i/wap/clockIn/icon_pdf.png'),
  'txt': require('@/assets/i/wap/clockIn/icon_txt.png'),
};
export default {
  name: "stuShortAnswerResult",
  components: {
    loadingStatusTem,
    clockAswerContent,
    clockCommentCom,
    clockTeaCommentCom,
    videoPopup,
  },
  watch: {

  },
  beforeRouteLeave(to, from, next) {
    //当有评论弹窗的时候，后退就关闭弹窗,因为后退会把history历史栈后退一个，所以要添加回去
    if (
      (this.showComInput || this.showTeaCommentModal || this.showVideo) &&
      to.path != "/" &&
      to.path != "/homePage/spread/spreadIndex" &&
      to.path != "/member/vip/vipUpNew"
    ) {
      this.showComInput = false;
      this.showTeaCommentModal = false;
      if (this.showVideo) {
        this.showVideo = false;
      }
      history.pushState(
        null,
        null,
        `${window.location.href.split("#")[0]}#${from.fullPath}`
      );
    } else {
    /*  if (to.path == '/homePage/login/bindMobile') {
        let curClockId = clockInId * 1;
        if (localStorage.getItem("certArray")) {
          let localCertArr = JSON.parse(localStorage.getItem("certArray"));
          if (localCertArr.includes(curClockId)) {
            localCertArr.splice(localCertArr.indexOf(curClockId), 1)
            if (localCertArr && localCertArr.length > 0) {
              localStorage.setItem("certArray", JSON.stringify(localCertArr));
            } else {
              localStorage.removeItem("certArray");
            }
          }
        }
      }*/
      next();
    }
  },
  data() {
    return {
      stuHwId:'',
      curHwId:'',
      enHwId:'',
      enDate :'',
      homeWorkInfo:'',
      curSelectDate:'',
      playAduioSrc:'',
      showVideo:false,
      officeIconImg: OFFICE_IMG_MAP,
      curComId: "", ///当前评论ID
      comType: 1, //是否教师评论教师
      replyId: "", //回复人的昵称
      inputCom: "", //评论的输入内容
      replyName: "", //回复人的ID
      showComInput: false, //显示评论输入框
      showTeaCommentModal: false, //显示教师评论输入框
      imgData: {},
      clockInInfo:'',
      isShowMasker:false,
      refereeId:'',
      isShare:false,
      workType:'',
      userId:localStorage.getItem("userId"),
      content:'',
      currentVideoObj: {},
      totalNum: 0,
      canvasFlag:false,
      bindPhoneSetting: null,
      myOperationShow: false,
      operationMenu: {},
      operationMenuLength: 0,
      imgCount:0,
      clockInId:0,
      smallImg: [
        {'url': require('@/assets/i/wap/clockIn/small1.png')},
        {'url': require('@/assets/i/wap/clockIn/small2.png')},
        {'url': require('@/assets/i/wap/clockIn/small3.png')},
        {'url': require('@/assets/i/wap/clockIn/small4.png')},
        {'url': require('@/assets/i/wap/clockIn/small5.png')},
        {'url': require('@/assets/i/wap/clockIn/small6.png')},
        {'url': require('@/assets/i/wap/clockIn/small7.png')},
      ],
      biglImg: [
        {'url': require('@/assets/i/wap/clockIn/big1.png')},
        {'url': require('@/assets/i/wap/clockIn/big2.png')},
        {'url': require('@/assets/i/wap/clockIn/big3.png')},
        {'url': require('@/assets/i/wap/clockIn/big4.png')},
        {'url': require('@/assets/i/wap/clockIn/big5.png')},
        {'url': require('@/assets/i/wap/clockIn/big6.png')},
        {'url': require('@/assets/i/wap/clockIn/big7.png')},
      ],
      longImgBgUrl:'',
      longImgBg: 0,
      isDisCheat:0,
      enableLongAudio:0
    };
  },
  mounted() {
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas-1.4.1.js").then(res => {
      html2canvas = res.default;
    })
    if (document.getElementById("audio")) {
      document.getElementById("audio").src = "";
    }
    this.curHwId = this.$route.query.curHwId || 0;
    this.stuHwId = this.$route.query.stuHwId || 0;
    clockInId = this.$route.query.clockInId || "";
    this.clockInId = this.$route.query.clockInId || "";
    curComIndex = "";
    this.curSelectDate = this.$route.query.curSelectDate || "";
    this.workType = this.$route.query.workType
    this.refereeId = this.$route.query.refereeId || '';
    this.isShare = this.$route.query.isShare || false;
    this.examMainId = this.$route.query.examMainId || '';
    this.totalNum = this.$route.query.totalNum * 1 || 0
    hasRead = this.$route.query.hasRead || "";
    this.playAduioSrc = "";
    isLoading = false;
    this.content = ''
    this.curComId = "" ///当前评论ID
    this.currentVideoObj = {};
    this.longImgBg = 0
    this.longImgBgUrl = 'background-image: url(' + this.biglImg[this.longImgBg].url + ')'
    getBindPhoneSetting(global.ckFrom.clockIn).then(res => {
      this.bindPhoneSetting = res;
    });
    this.getHomeWorkDatail();
    this.getBaseConfig()
    if (hasRead != '') {
      let getUrl = `signCard/markAsRead?hasRead=${hasRead}&signColId=${clockInId}`
      utilJs.getMethod(
        global.apiurl + getUrl,
        (res) => {
        }
      );
    }
    // this.getClockInDatail()
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, (res) => {
        this.imgData = res;
      });
    }
  },
  computed:{
//是否分享入口进入，refereeId与userId相等
    refereeAndUser:function() {
      if ((this.isShare && (this.refereeId == this.userId)) || !this.isShare) {
        return true
      } else {
        return false
      }
    }
  },
  activated() {

  },
  methods: {
    getBaseConfig() {
      let postUrl = `${global.apiurl}signCard/getBaseConfig?signColId=${clockInId}`;
      utilJs.getMethod(postUrl, (res) => {
        this.isDisCheat = res.isDisCheat
        this.enableLongAudio = res.enableLongAudio
      });
    },
    //时间转换成"形式
    changeTimeStr(timeStr) {
      return utilJs.timeTmpToNsTime(timeStr)
    },
    totalTime(uploadAudioList) {
      let totalTime = 0
      for (let item in uploadAudioList) {
        totalTime = totalTime + uploadAudioList[item].time
      }
      return utilJs.timeTmpToStrTime(totalTime)
    },
    chooseImgbg(index) {
      this.longImgBg = index
      this.longImgBgUrl = 'background-image: url(' + this.biglImg[this.longImgBg].url + ')'
      this.$nextTick(() => {
        this.clickBuildImg()
      });
    },
    setClinetHeight() {
      this.$nextTick(() => {
        let windowHeight = window.innerHeight;
        let fontSize = Number(document.documentElement.style.fontSize.replace(/px$/, ''));
        let topH = (200 / 40) * fontSize
        let spreadImgHeight = windowHeight - topH;
        document.querySelector("#loneSpreadImg").style.maxHeight = spreadImgHeight + 'px';
      })
    },
    //点击重测
    clickTestAgain() {
      if (this.homeWorkInfo.type == 1) {
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/simpleQue",
          query: {
            curHwId: this.homeWorkInfo.hwId,
            examMainId: this.homeWorkInfo.examMainId,
            clockId: clockInId,
            curDate: this.curSelectDate,
            workType:this.workType
          }
        });
        return;
      } else if (this.homeWorkInfo.type == 4) {
        //进入AI语音
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/clockForm",
          query: {
            curDate: this.curSelectDate,
            clockId: clockInId,
            curHwId: this.homeWorkInfo.hwId,
            isReTest: 1,
            examMainId: this.homeWorkInfo.examMainId,
            ttId: this.ttId, //营期ID
            tpId: this.tpId, //环节ID
            tlId: this.tlId, //课时ID
            ckFrom: this.ckFrom,
            workType:this.workType
          }
        });
        return;
      } else if (this.homeWorkInfo.type == 3) {
        //进入AI语音
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/voiceQue",
          query: {
            curHwId: this.homeWorkInfo.hwId,
            clockInId: clockInId,
            curDate: this.curSelectDate,
            isReTest: 1,
            examMainId: this.homeWorkInfo.examMainId,
            ttId: this.ttId, //营期ID
            tpId: this.tpId, //环节ID
            tlId: this.tlId, //课时ID
            ckFrom: this.ckFrom,
            workType:this.workType
          }
        });
        return;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/clockIn/choiceQue",
        query: {
          curHwId: this.homeWorkInfo.hwId,
          curNum: 1,
          isReText: true,
          examMainId: this.homeWorkInfo.examMainId,
          curDate: this.curSelectDate,
          clockId: clockInId,
          workType:this.workType
        }
      });
    },

    //点击查看解析
    clickLookAswer() {
      if (this.homeWorkInfo.type == 1) {
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/simpleQueResult",
          query: {
            curHwId: this.homeWorkInfo.hwId
          }
        });
      } else if (this.homeWorkInfo.type == 3) {
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/voiceResult",
          query: {
            curHwId: this.homeWorkInfo.hwId,
            totalNum: this.homeWorkInfo.content,
            curDate: this.curSelectDate,
            examMainId: this.homeWorkInfo.examMainId,
            clockInId: clockInId,
            workType:this.workType
          }
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/homeWorkResult",
          query: {
            examMainId: this.homeWorkInfo.examMainId,
            isFromDetail: true,
            curDate: this.curSelectDate,
            workType:this.workType,
            clockInId: clockInId,
            curHwId : this.homeWorkInfo.hwId
          }
        });
      }
    },
    clickOperationMenu(item) {
      if (item.value == 0) {
        this.clickTestAgain()
      }
      if (item.value == 1) {
        this.clickLookAswer()
      }
      if (item.value == 2) {
        this.clickeDelete()
      }
    },
    showOprationSheet(index) {
      this.myOperationShow = true
    },
    calcOperation(item, index) {
      let temObj = []
      if (item.isDisAgainSign && item.loginUserId == item.userId) {
        temObj.push({name:'重测', value:0})
      }
      if (item.isAnalyze && item.type == 1) {
        temObj.push({name:'查看解析', value:1})
      }
      if (item.enableDelete == 1) {
        temObj.push({name:'删除', value:2})
      }
      this.operationMenu = temObj
      this.operationMenuLength = Object.keys(this.operationMenu).length
      this.showOprationSheet(index)
    },
    // 方法名：删除考试记录
    // 方法：signCard/deleteExamLog
    // 方式：post
    // 参数：examMainId
    clickeDelete() {
      this.$cjConfirm({
        title: '提示',
        message: '删除后无法恢复，确定删除日记?',
        onConfirm:() => {
          utilJs.postMethod(
            global.apiurl + "signCard/deleteExamLog",
            { examMainId: this.homeWorkInfo.examMainId },
            res => {
              this.getHomeWorkDatail();
            },
          );
        }
      })
    },
    InfoResult(info) {
      this.getHomeWorkDatail(info);
    },
    clickGohomeworke() {
      if (this.homeWorkInfo.isIn == 1) {
        let q = {
          workType: this.workType,
          clockInId: clockInId,
          fromDetail: 0,
        }
        // if (this.homeWorkInfo.isTeacher == 1) {
        //   this.$routerGo(this, "push", {
        //     path: `/homePage/clockIn/teaHomeWorker`,
        //     query: {
        //       fromDetail:1,
        //       clockInId:clockInId
        //     }
        //   });
        //   return
        // }
        if (this.workType == 1) {
          q.curDate = this.curSelectDate;
        }
        if (this.workType == 2 || this.workType == 3) {
          q.curId = this.curHwId
        }
        if (this.refereeId && this.refereeId != "undefined" && this.refereeId != "null") {
          q.refereeId = this.refereeId;
        }
        this.$routerGo(this, "push", {
          path: `/homePage/clockIn/stuHomeWork`,
          query: q
        });
      } else {
        let q = {clockInId: clockInId}
        if (this.refereeId && this.refereeId != "undefined" && this.refereeId != "null") {
          q.refereeId = this.refereeId;
        }
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/clockInDetail",
          query: q
        });
      }
    },
    clickGoBack() {
      this.$router.go(-1);
    },
    clickImg(event) {
      event.preventDefault()
      return false
    },
    closeShowMasker() {
      this.isShowMasker = false;
    },
    // 生成长图
    clickBuildImg() {
      let that = this
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$loading.show({
        text: "长图生成中"
      });
      document.ontouchstart = null;
      document.ontuchmove = null;
      document.ontouchend = null;
      // this.canvasimg()
      this.homeWorkInfo.nickname = this.homeWorkInfo.nickname.length > 9 ? this.homeWorkInfo.nickname.substring(0, 9) + '...' : this.homeWorkInfo.nickname;
      this.homeWorkInfo.courseName = this.homeWorkInfo.courseName.length > 14 ? this.homeWorkInfo.courseName.substring(0, 14) + '...' : this.homeWorkInfo.courseName;
      this.content = this.homeWorkInfo.type == 1 ? ( this.homeWorkInfo.content.length > 1000 ? this.homeWorkInfo.content.substring(0, 1000) + '...' : this.homeWorkInfo.content) : this.homeWorkInfo.content
      if (this.homeWorkInfo.type == 2) {
        var canvasRound = document.getElementById('canound')
        this.drawMain(canvasRound, this.homeWorkInfo.accuracy * 100, "#71DB77", "#E6E6E6")
        return
      }
      this.$nextTick(() => {
        setTimeout(() => {
          // this.$loading.hide();
          that.canvas();
        }, 1000);
      });
      // }
    },
    canvasToImage1(ctx) {
      let that = this
      try {
        let dataURL = ctx.canvas.toDataURL("image/jpg", 1);
        document.querySelector("#imgContant").innerHTML = '';
        document.querySelector("#imgContant").innerHTML = '<img src="' + dataURL + '" class="c-w100 c-m-0auto" alt>'
        // document.getElementById("loneSpreadImg").setAttribute("src", dataURL);
        document.ontouchstart = true;
        document.ontuchmove = true;
        document.ontouchend = true;
        setTimeout(() => {
          // this.$loading.hide();
          that.canvas();
        }, 1000);
      } catch (err) {
        that.$loading.hide();
      }
    },
    //下载图片
    downImg(imgUrl) {
      // let that = this;
      return new Promise(function (resolve, reject) {
        let img = new Image();
        if (!imgUrl.includes('base64')) {
          img.crossOrigin = "anonymous";
          let nowTimeTmp = Date.now();
          imgUrl = imgUrl.includes('?') ? `${imgUrl}&time=${nowTimeTmp}` : `${imgUrl}?time=${nowTimeTmp}`;
        }
        img.src = imgUrl;
        img.onload = function () {
          resolve(img);
        };
        img.onerror = function (e) {
          console.log("下载图片失败");
          console.log(imgUrl);
          reject(e);
        };
      });
    },
    drawMain(drawing_elem, percent, forecolor, bgcolor) {
            /*
                @drawing_elem: 绘制对象
                @percent：绘制圆环百分比, 范围[0, 100]
                @forecolor: 绘制圆环的前景色，颜色代码
                @bgcolor: 绘制圆环的背景色，颜色代码
            */
            var context = drawing_elem.getContext("2d");
            var center_x = drawing_elem.width / 2;
            var center_y = drawing_elem.height / 2;
            var rad = Math.PI * 2 / 100;
            // 绘制背景圆圈
            function backgroundCircle() {
                context.save();
                context.beginPath();
                context.lineWidth = 8; //设置线宽
                var radius = center_x - context.lineWidth;
                context.lineCap = "round";
                context.strokeStyle = bgcolor;
                context.arc(center_x, center_y, radius, 0, Math.PI * 2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }

            //绘制运动圆环
            function foregroundCircle(n) {
                context.save();
                context.strokeStyle = forecolor;
                context.lineWidth = 8;
                context.lineCap = "round";
                var radius = center_x - context.lineWidth;
                context.beginPath();
                context.arc(center_x, center_y, radius, -Math.PI / 2, -Math.PI / 2 + percent * rad, true); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                context.stroke();
                context.closePath();
                context.restore();
            }

            //执行动画
            (function drawFrame() {
                window.requestAnimationFrame(drawFrame);
                context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
                backgroundCircle();
                foregroundCircle();
            }());
            document.ontouchstart = null;
            document.ontuchmove = null;
            document.ontouchend = null;
            this.$nextTick(() => {
              this.canvas();
            });
      },
    canvas() {
      let domTest = this.homeWorkInfo.type == 1 || this.homeWorkInfo.type == 4 ? document.getElementById("canvas1") : this.homeWorkInfo.type == 2 ? document.getElementById("canvas2") : document.getElementById("canvas3");
      if (!domTest) {
        return;
      }
      html2canvas(domTest, {
        useCORS: true,
        height: domTest.offsetHeight - 1, // 解决当前页面生成图片出现白边问题
        width: domTest.offsetWidth,
        letterRendering:true,
      }).then(canvas => {// eslint-disable-line
        // document.body.appendChild(canvas);
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    canvasToImage(ctx) {
      try {
        let dataURL = ctx.canvas.toDataURL("image/jpg");
        document.querySelector("#loneSpreadImg").innerHTML = '';
        document.querySelector("#loneSpreadImg").innerHTML = '<img src="' + dataURL + '" class="c-ww500 c-m-0auto c-br20" alt>'
        // document.getElementById("loneSpreadImg").setAttribute("src", dataURL);
        document.ontouchstart = true;
        document.ontuchmove = true;
        document.ontouchend = true;
        this.setClinetHeight()
        setTimeout(() => {
          this.$loading.hide();
          this.isShowMasker = true;
        }, 1000);
      } catch (err) {
        this.$loading.hide();
      }
    },
    goSpread() {
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: {
          // socailId: this.socialInfo.socialRoomId
          ckFrom: global.ckFrom.clockIn,
          cId: 0,
          extId: clockInId
        }
      })
    },
    //获取作业本信息
    getHomeWorkDatail(info) {
      this.canvasFlag = false
      let getUrl = `signCard/examDetail/${this.examMainId}`
      utilJs.getMethod(
        global.apiurl + getUrl,
        (res) => {
          if (!res.permission && res.prodStatus < 1) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "",
                info: "该打卡已下架！"
              }
            });
            return;
          }
          if (res.length == 0) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "clockIn",
                clockInId:clockInId,
                info: "该作业不存在！"
              }
            });
            return;
          }
          this.homeWorkInfo = res;
          if (info) {
            this.homeWorkInfo = Object.assign({}, this.homeWorkInfo, info)
            this.homeWorkInfo.qrCodeUrl = res.qrCodeUrl
            this.canvasFlag = true
          }
          this.workType = this.homeWorkInfo.signCardType
          this.wechatShare();
        }
      );
    },
    //点赞
    clickZan(index) {
      if (isLoading) {
        return;
      }
      isLoading = true;
      //点赞自己
      let zanType = 0;
      let examMainId = "";
      // if (index == -1) {
        zanType = this.homeWorkInfo.hasZan == 1 ? 2 : 1;
        examMainId = this.homeWorkInfo.examMainId;
      // } else {
      //   zanType = this.studentWorkList[index].hasZan == 1 ? 2 : 1;
      //   examMainId = this.studentWorkList[index].examMainId;
      // }

      utilJs.getMethod(
        `${global.apiurl}signCard/clickZan/${examMainId}?zanType=${zanType}`,
        (res) => {
          isLoading = false;
          if (res.status == 1) {
            this.$showCjToast({
              text: zanType == 1 ? "点赞成功" : "取消点赞",
              type: "success",
            });
            //点赞自己
            // if (index == -1) {
              this.$set(
                this.homeWorkInfo,
                "hasZan",
                zanType == 2 ? 0 : 1
              );
              if (zanType == 1) {
                this.homeWorkInfo.zanMan.push({
                  nickname: res.nickname,
                  userId:res.userId
                });
              } else {
                let zanArr = this.homeWorkInfo.zanMan.filter((item) => {
                  return item.userId != res.userId;
                });
                this.$set(this.homeWorkInfo, "zanMan", zanArr);
              }
            // } else {
            //   //点赞别人
            //   this.$set(
            //     this.studentWorkList[index],
            //     "hasZan",
            //     zanType == 2 ? 0 : 1
            //   );
            //   if (zanType == 1) {
            //     this.studentWorkList[index].zanMan.push({
            //       nickname: res.nickname,
            //       userId:res.userId
            //     });
            //   } else {
            //     let zanArr = this.studentWorkList[index].zanMan.filter((item) => {
            //       return item.userId != res.userId;
            //     });
            //     this.$set(this.studentWorkList[index], "zanMan", zanArr);
            //   }
            // }
          } else if (res.status == 2) {
            this.$showCjToast({
              text: res.message,
              type: "warn",
            });
          } else {
            this.$showCjToast({
              text: '操作失败',
              type: "warn",
            });
          }
        },
        (failRes) => {
          isLoading = false;
        }
      );
    },
    /**
    /**
     * 点击评论
     * index： -1 评论自己，其他:评论别人
     * cIndex： -1 评论别人的内容，其他：评论别人的评论
     */
    clickCom(index, cIndex, commentId, myAswerIndex, isTeacher) {
      if (cIndex == -1 && (this.homeWorkInfo.isTeacher == 1 || this.homeWorkInfo.isTeacher == 2) && isTeacher) {
        curComIndex = index;
        this.resultInfo = this.homeWorkInfo;
        this.homeWorkInfo.showTime = 0
        console.log(index)
        this.resultIndex = index;
        this.showTeaCommentModal = true;
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        this.enHwId = this.homeWorkInfo.hwId
        this.enDate = this.homeWorkInfo.startDay
        return;
      }
      let examMainId = "";
      if (cIndex != -1) {
        this.comType = this.homeWorkInfo.commentArr[cIndex].type;
      }
      examMainId = this.homeWorkInfo.examMainId;
      this.replyId =
        cIndex == -1
          ? ""
          : this.homeWorkInfo.commentArr[cIndex].userId;
      this.replyName =
        cIndex == -1
          ? ""
          : this.homeWorkInfo.commentArr[cIndex].nickname;
      this.enHwId = this.homeWorkInfo.hwId
      this.enDate = this.homeWorkInfo.startDay
      curComIndex = index;
      if (this.curComId != examMainId) {
        this.inputCom = "";
      }
      this.curComId = examMainId;
      this.showComInput = true;
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    //评论成功
    commentSuccess(comData, type) {
      let content = {
        type: comData.type,
        content: comData.content,
        nickname: comData.nickname,
        replyName: this.replyName,
        replyUserId: this.replyId,
        userId: this.homeWorkInfo.userId,
        imgArr: comData.imgArr,
        audioArr: comData.audioArr,
        videoArr: comData.videoArr || [],
        headimgurl:comData.headimgurl,
        commentId:comData.commentId,
        encodeUserId:localStorage.getItem("userId"),
        createdAt:comData.commentTime,
      };
      this.homeWorkInfo.showTime = 1
      this.playAduioSrc = "";
      if (curComIndex == -1) {
        //评论自己
        this.homeWorkInfo.commentArr.push(content);
      } else {
        //评论别人
        if (comData.teacherCom) {
          //老师点评
          this.$set(this.homeWorkInfo, "isHot", comData.isHot);
          this.$set(this.homeWorkInfo, "rank", comData.rank);
          // this.$set(this.homeWorkInfo, "createdAt", comData.commentTime);
        }
        // if (comData.teacherCom && this.sortType == 5) {
        //   //老师点评，当前类型是未点评，则把当前点评的这条数据移除掉
        //   this.studentWorkList.splice(curComIndex, 1);
        // } else {
          this.homeWorkInfo.commentArr.push(content);
        // }
      }
      console.log(this.homeWorkInfo, 'homeWorkInfo')
      this.showTeaCommentModal = false;
      this.showComInput = false;
      this.replyName = "";
      this.inputCom = "";
      this.replyId = "";
      if (type == 1) {
        this.getHomeWorkDatail();
      }
    },
    // 点击开始播放音频
    clickPlayAudio(audioUrl) {
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      //返回mp3则用audio播放
      if (this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        //document.getElementById("audio").play();
        utilJs.audioPlayFun(document.getElementById("audio"), "play");
      }
    },

    // //监听音频播放结束执行的内容
    playAudioEnd() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    // //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      this.showVideo = true;
      this.currentVideoObj = {videoSrc, m3u8Url}
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    cleanPlayAudioUrl() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    wechatShare: function () {
      let title = this.homeWorkInfo.nickname + '的打卡日记'
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      console.log(this.$route.path)
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?clockInId=${clockInId}&curHwId=${this.curHwId}&stuHwId=${this.stuHwId}&curSelectDate=${this.curSelectDate}&workType=${this.workType}&isShare=1&examMainId=${this.examMainId}&totalNum=${this.totalNum}&refereeId=${localStorage.getItem("userId")}`
      // let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${clockInId}&refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShare") ? JSON.parse(localStorage.getItem("homeWorkShare")) : shareIndexData;
      utilJs.wechatConfig(
        shareIndexData.shareUrl,
        shareIndexData.title,
        shareData.shareImg,
        shareData.shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare: function () {
      let title = this.homeWorkInfo.nickname + '的打卡日记'
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?clockInId=${clockInId}&curHwId=${this.curHwId}&stuHwId=${this.stuHwId}&curSelectDate=${this.curSelectDate}&workType=${this.workType}&isShare=1&examMainId=${this.examMainId}&totalNum=${this.totalNum}&refereeId=${localStorage.getItem("userId")}`
      // let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${clockInId}&refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShare") ? JSON.parse(localStorage.getItem("homeWorkShare")) : shareIndexData;
      utilJs.appShareTrue(
        shareIndexData.title,
        shareData.shareImg,
        shareIndexData.shareUrl,
        shareData.shareDesc
      );
    }
  },
  destroyed () {
    this.$loading.hide();
    this.isShowMasker = false
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped  lang="less">
.c-maxhlongImg{
  max-height: 20rem;
}
.anvasBox{
  width: 640px;
  height: 984px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContent{
  width: 500px;
  /* background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/short_answer.png"); */
  background-size: 100% 100%;
  position: relative;
}
.anvasContentbg{
  // background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/imglong.png");
  background-size: cover;
  background-repeat-y: repeat;
}
.anvasContentbg2{
  padding-bottom:70px ;
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/short_answer.png");
  background-size: 100% 100%;
}
.bgLocation {
  padding-top:120px
}
.dialog-demo /deep/ .weui-dialog{
  background-color: transparent;
}
.c-p-tm12{
  top: -1.2rem;
}
.c-p-rm12{
  right: -1.2rem;
}
.bottom-triangle {
  top: 60px;
  left: 0;
  width: 0;
  height: 0;
  border-width: 38px;
  border-style: solid;
  border-color: #fbb449 transparent transparent transparent;
}
.bottom-triangle-text {
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
}
.box {
  box-sizing: border-box;
  position: relative;
}
.wifi-symbol {
  width: 40px;
  height: 40px;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
}
.first {
  width: 4px;
  height: 4px;
  background: #cccccc;
  top: 36px;
  left: 36px;
}
.second {
  width: 20px;
  height: 20px;
  top: 28px;
  left: 28px;
}
.third {
  width: 32px;
  height: 32px;
  top: 20px;
  left: 20px;
}
.c-colckInBr{
  border-radius: 0.45rem 0.45rem 0.45rem 0;
}
.img-play-btn {
    position: absolute;
    top: 0;
    background-color: rgba(0,0,0,0.2);
    left: 0;
    width: 100%;
    height: 100%;
}
.onlyIcon{
  left: -0.26rem;
  top: -0.4rem;
}
</style>
